Pull Request Type

• ✨ feat
• 🐛 fix
• ♻️ refactor
• 💄 style
• 🔨 chore
• 📝 docs

Relevant Issues

resolves #4592

What is in this change?

This PR implements comprehensive Progressive Web App (PWA) support, enabling users to install AnythingLLM as a standalone application on their devices with a native app-like experience.

Core PWA Infrastructure

• Dynamic manifest endpoint (/manifest.json) that respects custom branding settings
  • Uses custom app name and icon from SystemSettings
  • Falls back to AnythingLLM defaults when no custom branding is set
  • Properly configured for standalone display mode with portrait orientation
  • Icons configured with "any maskable" purpose for adaptive display
• Essential PWA meta tags added to MetaGenerator:
  • mobile-web-app-capable for Android PWA support
  • apple-mobile-web-app-capable for iOS standalone mode (critical for launching outside Safari)
  • apple-mobile-web-app-status-bar-style: black-translucent for iOS status bar theming
  • Manifest link tag pointing to dynamic endpoint
• Route ordering fix to ensure manifest endpoint is reachable
  • Moved catch-all / route after specific routes (/robots.txt, /manifest.json)
  • Previously, catch-all was intercepting all requests including manifest

iOS-Specific Enhancements

• Status bar theming using body background-color approach with black-translucent style
  • white background for light mode
  • #0e0f0f background for dark mode (matches app header)
  • Uses @media (prefers-color-scheme: dark) for automatic switching
  • Transparent status bar shows page background color through
  • Note: Attempted theme-color meta tags were removed as they conflicted with this approach
• Fixed Safari auto-zoom issue by setting minimum 16px font-size on chat textarea
  • iOS Safari auto-zooms inputs with font-size < 16px
  • Applied !text-[16px] on mobile, md:${textSizeClass} on desktop
  • Preserves user's text size preference on desktop
  • Prevents disruptive zoom behavior without breaking accessibility (no maximum-scale used)
• Standalone mode detection with conditional UI enhancements for installed PWA
  • Created utils/pwa.js helper that checks multiple detection methods
  • Detects via display-mode: standalone media query, navigator.standalone (iOS), and Android TWA

Mobile UX Improvements

• Disabled over-scroll behavior on mobile devices
  • Applied overscroll-behavior: none to html element for screens ≤ 600px
  • Prevents rubber-band scrolling effect for more native app feel
• Enhanced chat input spacing with PWA-aware bottom padding
  • Base mobile spacing: pb-4 (16px)
  • PWA standalone mode: pb-5 (20px) for extra clearance from screen edge
  • Desktop unchanged: md:pb-0
• Increased border radius on chat input container when in standalone PWA mode
  • Normal mobile: rounded-2xl (16px)
  • PWA standalone: rounded-3xl (24px) for more modern app-like aesthetic
  • Desktop always uses rounded-2xl

Custom Branding Integration

• Preserved PWA meta tags when custom branding is applied
  • Previously, custom branding overwrote all meta tags, removing PWA tags
  • Fixed MetaGenerator to use .map() approach that selectively overrides only specific tags:
    • Overrides: <title>, meta title, og:title, twitter:title, favicon, apple-touch-icon
    • Preserves: All PWA-related meta tags, social media meta tags, other default tags
• Custom favicon and app name properly applied to both HTML meta tags and PWA manifest
  • MetaGenerator handles HTML meta tags
  • Dynamic manifest endpoint handles PWA manifest with same custom values

Developer Validations

• I ran yarn lint from the root of the repo & committed changes
• Relevant documentation has been updated
• I have tested my code functionality
• Docker build succeeds locally